<template>
	<view class="containers">

		<view class="main-app">
			<view class="header">

				<topWallet :getName="names" :isLogins="islogin"></topWallet>

			</view>
			<view class="main-content zh">
				<view class="m-0 row">
					<view class="col-12 col wallet-box">
						<view class="profile-main-account v0 card">
							<h4>{{$t('Open-blind-box-benefits-pool')}}</h4>
							<view class="user-info-panel">
								<view class="m-0 row">

									<view class="col-12 col">
										<view
											style="line-height: 10px; margin-bottom: 15px; display: grid; text-align: center;">

											<button type="button" @click="boxListUrl"
												style="width:200rpx;height:60rpx;margin:0 auto"
												class="activate-button mb-2 btn btn-primary">{{$t('Click_to_enter')}}</button>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="col-12 pt-3 col">
						<view>
							<view class="m-0 row">
								<view class="col-12 col">
									<p class="text-gold bold">{{$t('Participation-condition')}}</p>
								</view>
							</view>
							<view class="m-0 row">
								<view class="col-12 p-0 col">
									<view style="padding: 0.5em 0.3em;">
										<view class="active-card-package">
											<view class="card-package card">
												<view class="m-0 row">
													<view class="col-3 col-lg-3 col"><label
															class="name text-start">{{$t('Blind-box-monthly-fee')}}</label>
													</view>
													<view class="col-6 col">
														<label class="price justify-content-center"
															v-if="payStatus['monthDay']>0">3
															USDT({{$t('also')}}{{payStatus['monthDay']}}{{$t('Days_remaining')}})</label>
														<label class="price justify-content-center" v-else>3
															USDT</label>
													</view>
													<view class="col-3 col-lg-3 d-flex align-items-center gap-2 col">

														<button type="button" @click="goBuy(0)"
															class="package-button btn btn-primary"><label>{{$t('Buy')}}</label></button>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="m-0 row">
								<view class="col-12 p-0 col">
									<view style="padding: 0.5em 0.3em;">
										<view class="active-card-package">
											<view class="card-package card">
												<view class="m-0 row">
													<view class="col-3 col-lg-3 col"><label
															class="name text-start">{{$t('Blind-box-annual-fee')}}</label>
													</view>
													<view class="col-6 col">
														<label class="price justify-content-center"
															v-if="payStatus['monthDay']>0">30
															USDT({{$t('also')}}{{payStatus['monthDay']}}{{$t('Days_remaining')}})</label>
														<label class="price justify-content-center" v-else>30
															USDT</label>
													</view>
													<view class="col-3 col-lg-3 d-flex align-items-center gap-2 col">

														<button type="button" @click="goBuy(1)"
															class="package-button btn btn-primary"><label>{{$t('Buy')}}</label></button>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>

							</view>
							<view style="margin-bottom: 10px; line-height: 12px;">
								<span
									style="color: rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:10rpx">1.{{$t('blockfaqask1')}}。</span>
								<br>
								<span
									style="color: rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:10rpx">2.{{$t('blockfaqq1')}}。</span>
							</view>

						</view>

					</view>


					<view class="col-12 pt-3 col">
						<view>
							<view class="m-0 row">
								<view class="col-12 col">
									<p class="text-gold bold">
										{{$t('Participation-specification')}}
									</p>
								</view>
								<view class="col-12 p-0 col">
									<view class="activate-package" style="padding: 0.5em 0.3em;">
										<view class="m-0 row">
											<view style="border-color: rgb(193, 209, 255);"
												class="d-flex justify-content-left p-0">
												<view style="margin-bottom: 0px; line-height: 12px;">
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														1.{{$t('One_prize_pool')}}
													</view>

													<view
														style="color: rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														2.{{$t('instant_drawing')}}
													</view>

													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														3.{{$t('pools_per_day')}}
													</view>

													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														4.{{$t('10_prize_pools_online')}}
													</view>
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														5.{{$t('Each_individual_prize')}}
													</view>
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														6.{{$t('Each_account_can_participate')}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="col-12 pt-3 col">
						<view>
							<view class="m-0 row">
								<view class="col-12 col">
									<p class="text-gold bold">
										{{$t('Award-description')}}
									</p>
								</view>
								<view class="col-12 p-0 col">
									<view class="activate-package" style="padding: 0.5em 0.3em;">
										<view class="m-0 row">
											<view style="border-color: rgb(193, 209, 255);"
												class="d-flex justify-content-left p-0">
												<view style="margin-bottom: 0px; line-height: 12px;">
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														1.{{$t('irst_prize')}}
													</view>

													<view
														style="color: rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														2.{{$t('second_prizes')}}
													</view>
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														3.{{$t('Third_prize')}}
													</view>
													<view
														style="color:rgb(193, 209, 255); font-size: 22rpx; opacity: 0.9;line-height: 34rpx;margin-left:0rpx">
														4.{{$t('Each_prize')}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="col-12 pt-3 col">

						<view>
							<view class="subsection-container" style="margin-bottom: 10rpx;">
								<u-subsection :isHistory="true" :list="list" :current="curNow" @change="sectionChange"
									activeColor="#f1c594" bgColor="#00000000" inactiveColor="#fff"></u-subsection>
							</view>
							<view class="m-0 row">


								<view class="col-12 p-0 col">
									<view class="card-history mt-2 card" v-for="(item,index) in boxList" :key="index">
										<view class="history-container">
											<view style="padding: 0.5em 0.3em;">
												<view class="m-0 border-bottom align-items-center row">
													<view class="text-center col">
														<label>{{$t('Participation_date')}}
															<br>{{item.create_time}}</label>
													</view>
													<view class="text-center col">
														<label>{{$t('Winning_situation')}}
															<br>{{item.status}}</label>
													</view>

												</view>
											</view>
										</view>
									</view>
									<view v-if="boxList.length>0" class="uni-pagination-box" style="margin-top: 20rpx;">
										<UniPagination :page-size="pageSize" :current="pageIndex" :total="total"
											@change="change" />
									</view>
								</view>

								<!-- 		<view class="card-package " style="margin-top: 20rpx;">
									<uni-table ref="table" :loading="loadings" border type="table"
										:emptyText="No_further_data_available" @selection-change="selectionChange">
										<uni-tr>
											<uni-th width="100" align="center">{{$t('Participation_time')}}</uni-th>
											<uni-th width="100" align="center">{{$t('Winning_situation')}}</uni-th>

										</uni-tr>
										<uni-tr v-for="(item, index) in boxList" :key="index">

											<uni-td>
												<view class="name">{{ item.create_time }}</view>
											</uni-td>
											<uni-td align="center">{{item.status}}</uni-td>
										</uni-tr>
									</uni-table>
									<view class="uni-pagination-box">
										<UniPagination :page-size="pageSize" :current="pageIndex" :total="total"
											@change="change" />
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view role="dialog" aria-modal="true" v-if="showBuy"
			class="fade confirm-modal-container purchase-wallet-modal modal show" tabindex="-1"
			style="display: block; padding: 20rpx;">
			<view class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
				<view class="modal-content">
					<view class="modal-header"><label class="title">{{$t('Purchase_information')}}</label>
						<view @click="closeBuy" class="right" type="button" data-dismiss="modal" aria-label="Close"><svg
								class="stroke" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
								viewBox="0 0 16 16">
								<path fill="none" stroke="#c1d1ff" stroke-linecap="round" stroke-linejoin="round"
									stroke-width="1.5" d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"></path>
							</svg></view>
					</view>
					<view class="modal-body">
						<view>


							<view class="mt-2 row">
								<view class="col-12 col">
									<label>{{payFeeData[select]['name']}}</label>
								</view>
								<view class="col ">
									<view class="d-grid align-items-center gap-1 mt-2">
										<view class="d-flex justify-content-between align-items-center">
											<label>{{$t('Amount_of_consumption')}}</label><span>{{$t('overall_balance')}}
												{{userinfo.balance}}</span>
										</view>
										<view class="token-input">
											<input disabled="" type="text" class="form-control"
												:value="payFeeData[select]['money']">

										</view>

									</view>

								</view>
							</view>

							<view style="margin-top: 24rpx;">
								<label>{{$t('input_your_password')}}</label>

								<view class="input-group " style="margin-top: 20rpx;">
									<view class="line-group"><input :placeholder="input_your_password" type="password"
											step="any" name="from-currency" v-model="paypassword" />

									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="modal-footer">
						<button type="button" class="btn btn-secondary" style="margin-right: 20rpx;"
							@click="closeBuy">{{$t('close')}}</button>

						<button type="button" class="btn" :disabled="buyLoading"
							:class="buyLoading?'btn-secondary-buy':'btn-primary'"
							@click="tobuy()">{{$t('sure')}}</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="boxList.length==0">
			<view class="listing-container">
				<view class="d-flex justify-content-center  row">
					<view class="     d-grid"><span class="text-center text-empty pt-3">{{$t('No_record')}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 
		<u-loadmore :loadmoreText="loadText" marginBottom="40" fontSize="12" color="rgba(193, 209, 255, .4)"
			lineColor="rgba(193, 209, 255, .4)" /> -->

	</view>


</template>
<script>
	import topWallet from "@/components/nav/top_wallet.vue"
	import UniPagination from "@/components/UniPagination.vue"
	export default {
		components: {
			topWallet,
			UniPagination
		},
		data() {
			return {
				list: [
					this.$t('No_drawing_record'),
					this.$t('Winning_record')

				],
				pageSize: 20,
				total: 0,
				No_further_data_available: this.$t('No_further_data_available'),
				curNow: 0,
				userinfo: {},
				loading: this.$t('Load'),
				loadings: false,
				loadText: "",
				input_your_password: this.$t('input_your_password'),
				buyLoading: false,
				isLoading: false,
				loadn: false,
				select: 0,
				pageIndex: 1,
				open_reg: false,
				isopen: false,
				hasToken: false,
				showBuy: false,
				showChange: false,
				topChange: 'USDT',
				boxSums: '0',
				involvedStatus: 0,
				paypassword: '',
				box_status: 0,
				islogin:false,
				names:this.$t('login'),
				payFeeData: [{
						name: this.$t('Blind-box-monthly-fee'),
						money: "3 USDT",
						type: 1
					},
					{
						name: this.$t('Blind-box-annual-fee'),
						money: "30 USDT",
						type: 2,
					}
				],
				payStatus: [],

				boxList: [],
				payTypeStatus: [{
						name: this.$t('Buy')
					},
					{
						name: this.$t('Purchased')
					}
				],
				involved: this.$t('click-to-participate')

			};
		},
		onLoad: function() {

		},

		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.islogin = true;
				this.names = this.tui.hidden(uni.getStorageSync("yy_wallet").address, 3, 4)
				this.init()
			}
		},
		methods: {
			interchange() {
				this.showChange = true
			},
			boxListUrl() {
				uni.navigateTo({
					url: '/pages/box/boxList'
				})
			},
			// 分页触发
			change(e) {
				this.pageIndex = e.current
				this.getBoxList(e.current)
			},
			closeChange() {

				this.showChange = false
			},
			goBuy(type) {
				this.select = type
				this.showBuy = true
			},
			closeBuy() {
				this.showBuy = false
			},
			sectionChange(index) {
				this.curNow = index
				this.pageIndex = 1
				this.loadn = false
				this.boxList = []
				this.box_status = index
				switch (index) {
					case 0:


						break
					case 1:

						break


				}
				this.getBoxList();
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: 'default'
				};
				this.$refs.toast.showTips(options);
			},
			init() {
				let datas = {
					token: token,
				};
				let results = this.tui.request('/api/user/getPayFeeStatus', 'post', datas, 1000, 1, '', 'getPayFeeStatus');
				Promise.resolve(results).then((value) => {
					if (value.code == 200) {
						this.payStatus = value.data

					}
				})
				let token = this.tui.getToken();
				let data = {
					token: token,
				};
				let resultss = this.tui.request('/api/user/userAccount', 'post', data, 1000, 1, '', 'userAccount');

				Promise.resolve(resultss).then((value) => {
					if (value.code == 200) {
						this.userinfo = value.data;
					} else {
						this.tui.toast(value.message);
					}
				})

				this.getBoxList()
			},
			getBoxList() {
				let boxData = {
					page: this.pageIndex,
					box_status: this.box_status
				};
				this.loadings = true
				let boxOrder = this.tui.request('/api/user/getBoxList', 'post', boxData, 1000, 1, '', 'getBoxList');
				Promise.resolve(boxOrder).then((value) => {
					this.loadings = false
					if (value.code == 200) {
						this.total = value.data.total_count
						this.boxList = value.data.data
						// if (this.pageIndex == 1) {
						// 	this.total = value.data.total_count
						// 	this.boxList = value.data.data
						// 	if (this.boxList.length < 20) {
						// 		this.loadn = true
						// 		this.loadText = this.$t('Have_end')
						// 	} else {
						// 		this.pageIndex++
						// 		this.loadText = this.$t('load_more')
						// 	}
						// } 

						// else {
						// 	this.boxList = this.boxList.concat(value.data.data)
						// 	if (value.data.data.length < 20) {
						// 		this.loadn = true
						// 		this.loadText = this.$t('Have_end')
						// 	} else {
						// 		this.pageIndex++
						// 		this.loadText = this.$t('load_more')
						// 	}
						// }

						this.boxSums = value.data.sums

					}
				})
			},
			tobuy() {
				this.buyLoading = true;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					type: this.payFeeData[this.select]['type'],
					paypassword: this.paypassword
				};

				let result = this.tui.request('/api/user/payFee', 'post', datas, 1000, 1, '', 'payFee');
				Promise.resolve(result).then((value) => {

					if (value.code == 200) {
						this.tui.toast(value.message);
						setTimeout(() => {
							this.closeBuy();
							this.buyLoading = false;
							this.init()
						}, 1000);
						//写入缓存
					} else {
						this.buyLoading = false;
						this.tui.toast(value.message);
					}
				})
			},

			langPop() {
				this.isopen = true
			},
			closeOpen() {
				this.isopen = false
				this.open_reg = false
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom: function() {
			if (this.loadn) return
			// this.getBoxList()
		},

	};
</script>
<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		background-color: #252C46;
	}

	.containers {
		// background: url(../../static/images/common/bg.jpg) #000 top no-repeat;

		background-size: 100%;
		margin: 0 !important;
		// -webkit-filter: brightness(70%);
		// filter: brightness(90%);
		width: 100%;
		min-height: 100vh;

	}

	.main-app {
		overflow-y: auto;
	}

	.btn-secondary-buy {
		--bs-btn-color: #fff;
		--bs-btn-bg: #808080;
		--bs-btn-border-color: #808080;
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: #808080;
		--bs-btn-hover-border-color: #808080;
		--bs-btn-focus-shadow-rgb: 130, 138, 145;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #808080;
		--bs-btn-active-border-color: #808080;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: #808080;
		--bs-btn-disabled-border-color: #808080
	}

	.line-group {
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-bottom: 2px solid rgba(193, 209, 255, .38)
	}

	.stroke {
		stroke: transparent;
		stroke-width: 0;
	}

	svg {
		border: none;
	}

	.right {
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%)
	}
</style>